<!DOCTYPE html>
<html>
<head>
	<title>数据图表</title>
	<#include "../../include/head-file.ftl">
</head>
<body>
<div id="index" class="ms-index" v-cloak>
	<div class="ms-search" style="padding-top:20px;">
		<el-row>
			<el-form :model="form"  ref="searchForm"  label-width="50px" size="mini">
				<el-row>
					<el-col :span="16">
						<el-form-item  label="时间" prop="time">
							<el-radio-group v-model="form.time" @change="onChangeTime">
								<el-radio-button v-for="item in timeOptions" :label="item" :key="item">{{item}}</el-radio-button>
							</el-radio-group>
							<el-date-picker
									v-if="form.time=='自定义'"
									v-model="dateRange"
									type="daterange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									@change="dateChange">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" icon="el-icon-search" size="mini" @click="form.sqlWhere=null;currentPage=1;onQuery(true)">查询</el-button>
						<el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-row>
	</div>
	<div class="title">文档数据总览</div>
	<el-row style="background: #fff;padding: 14px;">
		<el-col :span="6" class="col">
			<div class="div1">新增文档数量</div>
			<div class="div2">{{intPartFormat(summaryData.documentCount)}}</div>
		</el-col>
		<el-col :span="6" class="col">
			<div class="div1">
				日均新增文档数量
				<el-tooltip class="item" effect="dark" content="当新增文档数量小于选择的天数时，日均新增文档数量显示为0" placement="top">
					<i class="el-icon-question"></i>
				</el-tooltip>
			</div>
			<div class="div2">{{intPartFormat(summaryData.documentAvgDayCount)}}</div>
		</el-col>
		<el-col :span="6" class="col">
			<div class="div1">发布报告数量</div>
			<div class="div2">{{intPartFormat(summaryData.reportPubCount)}}</div>
		</el-col>
		<el-col :span="6" style="text-align: center;">
			<div class="div1">
				日均发布报告数量
				<el-tooltip class="item" effect="dark" content="当发布报告数量小于选择的天数时，日均发布报告数量显示为0" placement="top">
					<i class="el-icon-question"></i>
				</el-tooltip>
			</div>
			<div class="div2">{{intPartFormat(summaryData.reportPubAvgDayCount)}}</div>
		</el-col>
	</el-row>
	<div class="title">已发布报告数据</div>
	<el-main class="ms-container">
		<el-table ref="multipleTable"
				  height="calc(100vh - 20px)"
				  border :data="dataList"
				  row-key="id"
				  v-loading="loading"
				  tooltip-effect="dark">
			<template slot="empty">{{emptyText}}</template>
			<el-table-column label="序号" width="80" prop="fileCode" show-overflow-tooltip>
				<template slot-scope="scope,text">
					{{(currentPage - 1) * pageSize +(scope.$index+1)}}
				</template>
			</el-table-column>
			<el-table-column label="报告标题"  align="center" prop="contentTitle" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="作者" align="center" width="200"  prop="contentAuthor">
			</el-table-column>
			<el-table-column label="上传时间" align="center" prop="createDate"  width="220">
			</el-table-column>
			<el-table-column label="点击量" align="center" prop="contentHit"  width="200">
				<template slot-scope="scope">
					{{scope.row.contentHit?scope.row.contentHit:0}}
				</template>
			</el-table-column>
			<#--<el-table-column label="下载量" align="center" prop="downloadCount"  width="180">-->
			<#--</el-table-column>-->
		</el-table>
		<el-pagination
				background
				:page-sizes="[10,20,30,40,50,100]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="currentPage"
				:page-size="pageSize"
				:total="total"
				class="ms-pagination"
				@current-change='currentChange'
				@size-change="sizeChange">
		</el-pagination>
	</el-main>
</div>
</body>
</html>
<script>
    "use strict";
    var indexVue = new Vue({
        el: '#index',
        data: {
            //分类列表
            dataList: [],
            //列表选中
            selectionList: [],
            //列表选中
            total: 0,
            //总记录数量
            pageSize: 10,
            //页面数量
            currentPage: 1,
            //加载状态
            loading: true,
            //提示文字
            emptyText: '',
            manager: ms.manager,
            loadState: false,
            //搜索表单
            form: {
                sqlWhere: null,
                // 文件名称
                time: '今天',
                beginDate:moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00',
                endDate: moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59',
            },
            dateRange:[],
            timeOptions: ['今天', '昨天', '近三天', '近七天', '自定义'],
            checkboxGroup1: '今天',
            summaryData:{},
        },
        methods: {
            onQuery:function(click){
                if (click) {//点击查询
                    if(this.form.beginDate && this.form.endDate){
                        this.summary();
                        this.list();
                    }else{
                        this.$notify({
                            title: '失败',
                            message: "请选择自定义时间",
                            type: 'warning'
                        });
                    }
				}else{
                    this.summary();
                    this.list();
				}


			},
			//数据总览
            summary:function(){
                var that = this;
                var form = that.form
                ms.http.post(ms.manager + "/cms/statistic/summary.do", Object.assign({}, form),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
					if(res.code===200){
					    that.summaryData = res.data;
					}
                });
			},
            //查询列表-已发布文档数据
            list: function () {
                var that = this;
                this.loadState = false;
                this.loading = true;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                // var form = JSON.parse(JSON.stringify(that.form));
                // for (var key in form) {
                //     if (!form[key]) {
                //         delete form[key];
                //     }
                // }
                var form = that.form
                history.replaceState({
                    form: form,
                    page: page
                }, "");
                ms.http.post(ms.manager + "/cms/statistic/report.do", form.sqlWhere ? Object.assign({}, {
                    sqlWhere: form.sqlWhere
                }, page): Object.assign({}, form, page),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }

                    if (!res.result || res.data.total <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        that.total = res.data.total;
                        that.dataList = res.data.records;
                    }
                });
                setTimeout(function () {
                    if (that.loadState) {
                        that.loading = false;
                    } else {
                        that.loadState = true;
                    }
                }, 500);
            },
            //删除
            del: function (row) {
                var that = this;
                that.$confirm('此操作将永久删除分类和分类下的文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    var fileIds  = [];
                    row.forEach(function (item) {
                        fileIds.push(item.id)
                    });
                    ms.http.post(ms.manager + "/cms/document/delete.do", fileIds, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$notify({
                                title: '成功 ',
                                type: 'success',
                                message: '删除成功!'
                            }); //删除成功，刷新列表

                            that.list();
                        } else {
                            that.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    });
                })
            },
			//pageSize改变时会触发
            sizeChange: function (pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange: function (currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            //表格数据转换
            dataFormat: function (row, column, cellValue, index,dataOptions) {
                var value = "";
                if (cellValue) {
                    var data = dataOptions.find(function (item) {
                        return item.dictValue == cellValue;
                    });
                    if (data && data.dictLabel) {
                        value = data.dictLabel;
                    }
                }
                return value;
            },

            //重置表单
            rest: function () {
                this.$refs.searchForm.resetFields();
                this.form.beginDate = moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00';
                this.form.endDate = moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59';
                this.onQuery();
            },
            dateChange: function (val) {
                if (val) {
                    this.form.beginDate = val[0] + ' 00:00:00';
                    this.form.endDate = val[1] + ' 23:59:59';
                }else{
                    this.form.beginDate = ''
                    this.form.endDate = ''
                }
            },
            onChangeTime:function(val){
                if(val==="今天"){
                    this.form.beginDate = moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00';
                    this.form.endDate = moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59';
                }else if(val==="昨天"){
                    this.form.beginDate = moment().subtract('days', 1).format('YYYY-MM-DD') + ' 00:00:00';
                    this.form.endDate = moment().subtract('days', 1).format('YYYY-MM-DD') + ' 23:59:59';
                }else if(val==="近三天"){
                    this.form.beginDate = moment().subtract('days', 2).format('YYYY-MM-DD') + ' 00:00:00';
                    this.form.endDate = moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59';
                }else if(val==="近七天"){
                    this.form.beginDate = moment().subtract('days', 6).format('YYYY-MM-DD')+ ' 00:00:00';
                    this.form.endDate = moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59';
                }else if(val==="自定义"){
                    this.form.beginDate = '';
                    this.form.endDate = '';
                    this.dateRange = [];
                }
            },
            intPartFormat:function (value) {
                if (!value) {
                    return '0'
                }
                var intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
                return intPartFormat
            }
        },
        created: function () {
            if (history.hasOwnProperty("state")) {
                this.form = history.state.form;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }
            this.onQuery();
        }
    });
</script>
<style>
	#main .ms-search {
		padding: 20px 0 0;
	}
	#main .ms-container {
		height: calc(100vh - 141px);
	}
	body{
		overflow: hidden;
	}
	/*饿了么滚动样式*/
	.el-scrollbar__wrap{
		overflow-x: scroll !important;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}
	.el-icon-arrow-down {
		font-size: 14px;
	}
	.title {
		box-sizing: border-box;
		border-width: 1px;
		border-bottom: 1px solid rgba(233, 233, 233, 1);
		border-radius: 2px;
		font-weight: 700;
		font-style: normal;
		color: rgba(0, 0, 0, 0.85);
		padding: 20px 14px 10px;
		font-size: 18px;
		background: #fff;
	}
	.col{
		border-right: 1px solid rgba(233, 233, 233, 1);
		text-align: center;
	}
	.div1{
		font-weight: 400;
		font-style: normal;
		color: rgba(0, 0, 0, 0.4);
		line-height: 22px;
	}
	.div2{
		font-size: 30px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 38px;
		margin-top: 15px;
	}
</style>